<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        一、内联元素居中布局
           水平居中
            行内元素可设置：text-align: center;
            flex布局设置父元素：display: flex; justify-content: center;

           垂直居中
            单行文本父元素确认高度：height === line-height
            多行文本父元素确认高度：disaply: table-cell; vertical-align: middle;

        二、块级元素居中布局
           水平居中
            定宽: margin: 0 auto;

           垂直居中
            position: absolute设置left、top、margin-left、margin-top(定高)；
            position: fixed设置margin: auto(定高)；
            display: table-cell；
            transform: translate(x, y)；
            flex(不定高，不定宽)；
            grid(不定高，不定宽)，兼容性相对比较差（父元素：display: grid;子元素：margin: auto;）
        */


        /* 方式一：父级设置 */
        /* 
            display: flex;
            justify-content: center;
            align-items: center;
         */

        /* 方式二：绝对定位,相对于谁居中就给谁父级定位 */
        /*
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        */

        /* 方式三：绝对定位 + transform */
        /* position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        */

        #box1 {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            position: relative;
            /* 方式一： */
            /* display: flex;
            justify-content: center;
            align-items: center; */
        }

        #box2 {
            /* 方式二：绝对定位 */
            /* 
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto; */

            /* 方式三：绝对定位 + transform */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 100px;
            background-color: chartreuse;

        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2"></div>
    </div>
</body>
</html>